<template>
    <div class="detail">
        <el-breadcrumb separator="/" class="title">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: `/goodsclass/${goods.category[0]}` }">{{code2Txt(goods.category[0])}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{goods.name}}</el-breadcrumb-item>
        </el-breadcrumb>
        <detail-goods-info :isCollection="isCollection" :goods="goods"></detail-goods-info>
        <ul class="detail-nav">
            <li class="choise">商品详情</li>
            <li @click="pageSkipping('comment')">商品评论</li>
        </ul>
        <div class="show-page img-desc" ref="desc">
            <div><span>品牌：好孩子</span><span>产品名：{{goods.name}}</span></div>
            <div v-for="(item, index) in goods.desImg" :key="index" class="img-desc-item">
                <img :src="item.url" alt="">
            </div>
        </div>
        <ul class="detail-nav" >
            <li @click="pageSkipping('desc')">商品详情</li>
            <li class="choise">商品评论</li>
        </ul>
        <div class="show-page" ref="comments">
            <div class="goods-comment">
                <div class="goods-comment-title">
                    <div>
                        <span v-if="goods.comments.length == 0">暂无商品评价</span>
                        <span v-else>当前商品评价</span>
                        <el-rate v-model="comment" disabled></el-rate>
                    </div>
                    <div>
                        本商品评论均由购买过该商品的用户提供。
                    </div>
                </div>
            </div>
            <div class="goods-comment-content" >
                <div v-for="(item, index) in goods.comments" :key="index">
                </div>
            </div>
        </div>
        <div>
            <img src="@/assets/img/common/footer-service.png" alt="">
        </div>
    </div>
</template>

<script>
    import {sendwithpost} from "../../network/profile";
    import DetailGoodsInfo from "./children/DetailGoodsInfo";
    import {findLabel, eventBus} from "../../common/util";

    export default {
        name: "Detail",
        data() {
            return {
                goods: {
                    category: [],
                    comments: []
                },
                comment: 0,
                isCollection: false
            }
        },
        components: {
          DetailGoodsInfo
        },
        mounted() {
            sendwithpost({
                url: 'getdetail',
                data: {
                    id: this.$route.query.goodsId
                }
            })
                .then(res=> {
                    if (res.data.res_code == 2) {
                        this.goods = res.data.goods
                        if (this.$store.state.lognUser) {
                            if (this.$store.state.lognUser.favorites.includes(this.goods._id)) {
                                this.isCollection = true
                            }
                        }

                    }
                })
            eventBus.$on('changeCollection',()=> {
                this.isCollection = !this.isCollection
            })
        },
        computed: {

        },
        watch: {
          "$route": 'fetchData'
        },
        methods: {
            code2Txt(code) {
                return findLabel(code,this.$store.state.goodsType)
            },
            pageSkipping(direction) {
                if (direction === 'desc') {
                        document.body.scrollTop = this.$refs.desc.offsetTop
                        document.documentElement.scrollTop = this.$refs.desc.offsetTop
                } else if (direction === 'comment') {
                    document.body.scrollTop = this.$refs.comments.offsetTop
                    document.documentElement.scrollTop = this.$refs.comments.offsetTop
                }
            },
            fetchData() {
                sendwithpost({
                    url: 'getdetail',
                    data: {
                        id: this.$route.query.goodsId
                    }
                })
                    .then(res=> {
                        if (res.data.res_code == 2) {
                            this.goods = res.data.goods
                            if (this.$store.state.lognUser.favorites.includes(this.goods._id)) {
                                this.isCollection = true
                            }
                        }
                    })
            }
        }
    }
</script>

<style scoped>
    .detail {
        margin: 100px auto;
        max-width: 960px;
        border-top: 1px solid #000000;
    }
    .title {
        margin: 20px 0;
    }
    .detail-nav {
        display: flex;
        list-style: none;
        justify-content: flex-start;
    }
    .detail-nav li {
        border: 1px solid #eeeeee;
        height: 30px;
        width: 100px;
        line-height: 30px;
        text-align: center;
        margin: 0 5px;
        cursor: pointer;
    }
    .detail-nav .choise {
        border: 1px solid #000000;
        border-bottom: none;
        position: relative;
        z-index: 3;
        background-color: #fff;
    }
    .show-page {
        position: relative;
        z-index: 1;
        top: -18px;
        border-top: 1px solid #000000;
        padding: 30px 0;
        width: 870px;
        margin: 0 auto;
    }
    .img-desc {
        font-size: 13px;
        font-weight: 700;
    }
    .img-desc div:nth-child(1) {
        display: flex;
        justify-content: space-around;
        border-bottom: 1px dashed #8c939d;
        padding-bottom: 30px;
        margin-bottom: 30px;
    }
    .img-desc-item {
        width: 800px;
        margin: 0 auto;
        overflow: hidden;
    }
    .img-desc-item img {
        width: 100%;
    }
    .goods-comment {
        background-image: url("../../assets/img/common/detail-bgc.png");
        background-size: contain;
        padding: 10px;
        width: 790px;
        margin: 0 auto;
    }
    .goods-comment-title {
        display: flex;
        font-size: 14px;
        background-color: #fff;
        padding: 18px 0;
        height: 50px;
        justify-content: space-around;
    }
    .goods-comment-title > div {
        margin-top: 10px;
    }
</style>